// 组件从概念上看就像是函数，它可以接收任意的输入值（称之为“props”），并返回一个需要在页面上展示的React元素。

// 从react中引入React、Component核心模块
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import Welcome from './Welcome/Welcome';
import Clock from './Clock/Clock';
import Events from './Events/Events';
import Greeting from './Greeting/Greeting';
import NumberList from './NumberList/NumberList';
import NameForm from './NameForm/NameForm';
import Select from './NameForm/Select';
import Reservation from './NameForm/Reservation';
import Calculator from './Calculator/Calculator';
import Calculator2 from './Calculator/Calculator2';
import CompositionAndInheritance from './CompositionAndInheritance/CompositionAndInheritance';
import CompositionAndInheritance2 from './CompositionAndInheritance/CompositionAndInheritance2';
import CompositionAndInheritance3 from './CompositionAndInheritance/CompositionAndInheritance3';



// 定义组件App，继承react核心模块中的Component。组件名称首字母必须大写。
class App extends Component {
  // 提供render函数，返回JSX语法写的元素(类似HTML结构，但是JSX是JavaScript的扩展)
  render() {
    // JSX中有且仅有一个根元素
    // JSX更接近JavaScript，所有的HTML属性等都必须写成小驼峰命名法，如class要写成className。
    // {}中可以写变量、JS表达式等
    // 当React遇到的元素是用户自定义的组件(例如下面的Welcome组件)，它会将JSX属性作为单个对象传递给该组件,这个对象称之为“props”
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <div>
          <h1>React-demo</h1>
        </div>
        <Welcome name="Amundsen"></Welcome>
        <Clock data="我是App组件传递的props数据" />
        <div>
          <Events />
        </div>
        <div>
          <Greeting />
        </div>
        <div>
          <NumberList/>
        </div>
        <div>
          <NameForm/>
        </div>
        <div>
          <Select/>
        </div>
        <div>
          <Reservation/>
        </div>
        <div>
          <Calculator/>
        </div>
        <div>
          <Calculator2/>
        </div>
        <div>
          <CompositionAndInheritance/>
        </div>
        <div>
          <CompositionAndInheritance2 />
        </div>
        <div>
          <CompositionAndInheritance3 />
        </div>
      </div>
    );
  }
}

// 暴露App组件
export default App;
